﻿<style type="text/css">
    .map-card {
        width: 427px;
        background-color: #f8faff;
       
    }

        .map-card .coverphoto {
            display: inline-block;
            width: 200px;
            height: 100px;
        }

        .map-card table {
            border-collapse: collapse;
            width: 100%;
            height: 40px;
            border: none;
            overflow: hidden;
            background-color: #fff;
        }

        .map-card dt {
            font-size: 16px;
            text-align: center;
            color: #323232;
            height: 46px;
            line-height: 46px;
        }

        .map-card dl {
            padding: 0px 20px 20px 20px;
        }

        .map-card .yellow {
            padding-left: 10px;
            color: #f26622;
        }

        .map-card .rank {
            color: #959595;
        }

            .map-card .rank img {
                vertical-align: -7px;
                margin-right: 5px;
                width: 14px;
                height: 18px;
            }

        .map-card .detail {
            color: #636363;
            line-height: 18px;
            height: 36px;
            overflow: hidden;
        }

        .map-card dl {
            border-bottom: #ececec solid 1px;
            background-color: #f8fbff;
        }

        .map-card td {
            height: 18px;
            line-height: 18px;
            vertical-align: middle;
            text-align: center;
        }

            .map-card td a {
                color: #636363;
                display: block;
                position: relative;
                height: 18px;
                line-height: 18px;
            }

                .map-card td a:after {
                    position: absolute;
                    content: "";
                    height: 18px;
                    background-color: #ececec;
                    width: 1px;
                    right: -1px;
                    top: 0px;
                }
</style>


<div ng-controller="EatController as vm">

    <label id="err"></label>



    <div map-lazy-load="http://maps.google.cn/maps/api/js?libraries=geometry&sensor=false&callback=initialize">
        <!--<ng-map center="41,-87" zoom="3"></ng-map>-->
        <ng-map default-style="true" center="{{vm.chicago.lat}},{{vm.chicago.lng}}" zoom="14">
            <!--<marker position="{{cm.address}}" icon="{
                              path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
                              fillColor: 'yellow',
                              fillOpacity: 0.8,
                              scale: 1,
                              strokeColor: 'gold',
                              strokeWeight: 14
                            }">
            </marker>-->

            <marker name="{{cm.id}}" position="{{vm.chicago.lat}},{{vm.chicago.lng}}" icon="../img/mapicon.png" dragglele="true">
            </marker>


            <!--<custom-marker on-mouseover="mouseover()" on-mouseout="mouseout()"
                           visible="false" ng-repeat="cm in customMarkers"
                           on-click="vm.closeCustomMarker()" position="{{cm.address}}" >
                <div class="{{cm.class}}">
                    <div> Custom Marker {{cm.class}}</div>
                    <div> Hello {{world}}</div>
                    <button onclick="">关闭</button>
                </div>

            </custom-marker>-->


            <marker name="{{cm.id}}" position="{{cm.address}}" ng-repeat="cm in customMarkers"
                    icon="../img/mapicon.png" dragglele="true" on-click="map.showInfoWindow(event, 'bar')">
            </marker>



            <info-window id="bar" min-width="200" style="overflow:hidden">
                <div ng-non-bindable>
                    <div class="map-card">
                        <dl>
                            <dt class="fontYaHei" style="float:left;">
                                <img class="coverphoto" src="http://static.qyer.com/models/project/place/images/tmp/focusphoto.jpg" />
                            </dt>
                            <dd class="fontYaHei" >
                                踏青
                            </dd>
                            <dd>
                                <p class="detail">
                                    大家一起来参加,这个活动吧..费用AA
                                </p>
                            </dd>
                        </dl>

                    </div>


                </div>
            </info-window>



        </ng-map>
    </div>

</div>

<!---->
<!--<script src="http://maps.google.cn/maps/api/js?libraries=geometry&sensor=false&key=AIzaSyDzl6F_ZMCEpLimgyeEa20KVQ8Oxhfj16o&callback=initialize" type="text/javascript"></script>-->
<!--<script src="http://maps.google.cn/maps/api/js?libraries=geometry&sensor=false&callback=initialize" type="text/javascript"></script>-->
